<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title>套餐修改</title>
<script src="js/mui.min.js"></script>
<link href="css/mui.css" rel="stylesheet"/>
<link rel="stylesheet" href="css/style.css" />
<style>
	.mui-content-padded{
		position: fixed;
		bottom: 0px;
		left: 0px;
		right: 0;
	}
	.mui-btn-block{
		margin-bottom: 0;
		padding: 8px 0;
	}
</style>
</head>
<body>
<header class="mui-bar mui-bar-nav">
    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
    <h1 class="mui-title">套餐修改</h1>
</header>	
<div class="mui-content">
	<ul class="mui-table-view">
        <li class="mui-table-view-cell">
            <div class="mui-media-body">
               	13800138001
            	<p class="mui-pull-right">4G上网套餐58元</p>
            </div>
        </li>
   </ul>
    <div class="mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
		<a class="mui-control-item mui-active" href="#">套餐修改</a>
		<a class="mui-control-item" href="#">套餐叠加</a>
	</div>
	<div class="packageList">
		<ul class="mui-table-view mui-grid-view mui-grid-9" id="cate">
	            <li id="promptBtn" class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3 active">	
	            	<a href="javascript:changeCate(0);"  class="mui-media-body">
	            		<span>500M</span>
	            		<span>22.50元</span>
	            	</a>
	            </li>
	             <li id="promptBtn" class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">	
	            	<a href="javascript:changeCate(1);"  class="mui-media-body">
	            		<span>500M</span>
	            		<span>22.50元</span>
	            	</a>
	            </li>
	            <li id="promptBtn" class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">	
	            	<a href="javascript:changeCate(2);"  class="mui-media-body">
	            		<span>500M</span>
	            		<span>22.50元</span>
	            	</a>
	            </li>
	            <li id="promptBtn" class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">	
	            	<a href="javascript:changeCate(3);"  class="mui-media-body">
	            		<span>500M</span>
	            		<span>22.50元</span>
	            	</a>
	            </li>
	            <li id="promptBtn" class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">	
	            	<a href="javascript:changeCate(4);"  class="mui-media-body">
	            		<span>500M</span>
	            		<span>22.50元</span>
	            	</a>
	            </li>
	     </ul>
	</div>
</div>
<div class="mui-content-padded">
	<button type="button" class="mui-btn mui-btn-block mui-btn-primary">确认修改</button>
</div>

<script src="js/h.min.js"></script>
<script type="text/javascript">
	mui.init();
	function changeCate(cateId){
		h('.packageList').find('li').removeClass('active').eq(cateId).addClass('active');
	} 
</script>
</body>

</html>